import React, { useState } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import { Select, DatePicker, Button, Modal, Popconfirm, Form, Table } from 'antd';
import { IArea, getAllArea } from 'api/Area';
import { useRequest } from 'ahooks';
import moment from 'moment';
import { AlarmTypes, getAbornomalList } from 'api/AbnormalAlarm';
import { DeleteOutlined, VideoCameraOutlined } from '@ant-design/icons';
import useAntdTable, { PaginatedParams } from 'ahooks/lib/useAntdTable';

const { Option } = Select;
const { RangePicker } = DatePicker
const EventRecord = () => {
    const { data: areas = [] } = useRequest(getAllArea);
    const [abnormalVideoVisible, setAbnormalVideoVisible] = useState(false)
    const columns = [
        {
            title: '路桩区域',
            dataIndex: 'areaId',
            render: (areaId: number) => areas.find(area => area.id === areaId)?.name
        },
        {
            title: '路桩ID',
            dataIndex: 'liftingId'
        },
        {
            title: '异常类型',
            dataIndex: 'type',
            render: (type: number) => AlarmTypes[type]
        },
        {
            title: '时间',
            dataIndex: 'createDate'
        },
        {
            title: '视频大小',
            dataIndex: 'videoSize',
            render: () => '10M'
        },
        {
            title: '操作',
            width: 200,
            render: (record: any) => <>
                <Button icon={<VideoCameraOutlined />} size="small" type="primary" className="mr10" onClick={() => viewVideo(record)}>回放</Button>
                <Popconfirm
                    title="确定删除这条记录?"
                    onConfirm={() => confirmDelete(record)}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button icon={<DeleteOutlined />} size="small" >删除</Button>
                </Popconfirm>

            </>
        }
    ]
    const confirmDelete = (record: any) => {
        console.log(record)
    }
    const viewVideo = (data: any) => {
        console.log(data)
       setAbnormalVideoVisible(true)
    }
    const [form] = Form.useForm()
    const getTableData = (
        { current, pageSize }: PaginatedParams[0],
        formData: any,
    ) => {
        console.log(formData)
        const query = {
            current,
            pageSize,
            areaId: formData.areaId,
            startTime: formData.timeRange ? formData.timeRange[0].format('YYYY-MM-DD') : '',
            endTime: formData.timeRange ? formData.timeRange[1].format('YYYY-MM-DD') : ''
        }
        return getAbornomalList(query).then((res) => ({
            total: res.totalCount,
            list: res.list
        }));
    };
    const { tableProps, search } = useAntdTable(getTableData, {
        defaultPageSize: 5,
        form,
    });

    const { submit } = search;
    return (
        <div className="operation-record">
            <Breadcrumb crumbs={['智能管控', '异常事件录像']}></Breadcrumb>
            <Form form={form} layout="inline" className="mb20" style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Form.Item label="路桩区域" name="areaId">
                    <Select style={{ width: 200 }} allowClear>
                        {areas.map((area: IArea) => (
                            <Option key={area.id} value={area.id || ''}>
                                {area.name}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item label="时间" name="timeRange">
                    <RangePicker
                        ranges={{
                            今天: [moment(), moment()],
                            本月: [moment().startOf('month'), moment().endOf('month')],
                        }}
                        showTime
                        format="YYYY/MM/DD"
                        style={{ width: '100%' }}
                    ></RangePicker>
                </Form.Item>
                <Button onClick={submit}>搜索</Button>
            </Form>
            <Table columns={columns} rowKey="id" {...tableProps} />
            <Modal
                title="异常回放"
                visible={abnormalVideoVisible}
                cancelText='退出'
                maskClosable={false}
                zIndex={9999}
                onCancel={() => setAbnormalVideoVisible(false)}
                onOk={() => setAbnormalVideoVisible(false)}
                destroyOnClose={true}
            >
                <video width="480" height="360"
                    src='//player.alicdn.com/video/aliyunmedia.mp4' controls autoPlay></video>
            </Modal>
        </div>
    );
};
export default EventRecord;
